<template>
  <div class="detail">
    <c-section title="图纸基础信息">
      <c-list :column="3" label-width="150px">
        <c-list-item label="图纸编码" :value="detail.picTaskCode" />
        <c-list-item label="图纸名称" :value="detail.picTaskName" />
        <c-list-item label="图纸类型" dict-type-code="PIC_TYPE" :value="detail.picType" />
        <c-list-item label="门店建设项目号" :value="detail.constCode" />
        <c-list-item label="所属门店编码" :value="detail.shopCode" />
        <c-list-item label="所属门店" :value="detail.shopName" />
        <c-list-item label="所属客户编码" :value="detail.clientCode" />
        <c-list-item label="所属客户" :value="detail.clientName" />
        <c-list-item label="所属办事处" :value="detail.officeName" />
        <c-list-item label="设计范围" dict-type-code="DECORATION_RANGE" :value="detail.designRange" />
        <c-list-item label="设计区域" :span="3" :value="$getAreaName(detail.designSpace)" />
        <c-list-item label="设计业务类型" dict-type-code="BIZ_TYPE" :value="detail.designBizType" />
        <c-list-item label="装修形式" dict-type-code="DECORATION_FORM" :value="detail.decorationType" />
        <c-list-item label="启用状态" dict-type-code="BOOLEANS" :value="detail.enable" />
        <c-list-item label="是否含成融定" dict-type-code="BOOLEANS" :value="detail.haveEAndC" />
        <c-list-item label="软体区总面积" suffix="m²" :value="detail.softwareSumArea || 0" />
        <c-list-item label="套房区总面积" suffix="m²" :value="detail.suiteSumArea || 0" />
        <c-list-item label="新业务面积汇总" suffix="m²" :value="detail.newBusinessAreaSummary || 0" />
      </c-list>
    </c-section>
    <c-permission-tabs v-if="['BC', 'SG'].includes(detail.picType)">
      <el-tab-pane label="出图区域及系列" name="areaSeries">
        <BCTable v-if="dType==='BC'" ref="table" preview :table-data="tableData" :detail="detail" />
        <SGTable v-if="dType==='STORES'" ref="table" preview :table-data="tableData" :detail="detail" />
        <DoorTable v-if="dType==='DOOR'" ref="table" preview :table-data="tableData" :detail="detail" />
      </el-tab-pane>
      <el-tab-pane v-if="detail.picType!=='SG'" label="出图品类及数量" name="category">
        <c-table-box hide-func :setting="false" :other-filters="categoryFiltersRaw" :table-config="categoryTableConfig" />
      </el-tab-pane>
    </c-permission-tabs>
  </div>
</template>
<script>
import { otherFiltersItem } from '@/utils'
import { getBasicsInfo, postDetailTaskAreaPage } from '@/api/shopDrawing'
import BCTable from './edit/components/BCTable'
import DoorTable from './edit/components/DoorTable'
import SGTable from './edit/components/SGTable'
export default {
  name: 'Detail',
  components: {
    BCTable,
    DoorTable,
    SGTable
  },
  data() {
    return {
      tableData: [],
      categoryTableConfig: {
        interfacePath: '/slm-admin/api/v1/designOutpicDetailTask/getCategoryNumberPage',
        setting: [
          {
            prop: 'areaName',
            label: '所属区域'
          },
          {
            prop: 'spaceName',
            label: '所属空间'
          },
          {
            prop: 'spaceTotalArea',
            label: '空间总面积'
          },
          {
            prop: 'seriesName',
            label: '系列名称'
          },
          {
            prop: 'styleName',
            label: '所属专区'
          },
          {
            prop: 'categoryNames',
            label: '包含品类'
          },
          {
            prop: 'categoryNumber',
            label: '品类数量'
          }
        ]
      },
      detail: {},
      filterDesignSpace: []
    }
  },
  computed: {
    categoryFiltersRaw() {
      return [
        otherFiltersItem('outpicDetailTaskCode', this.$route.query.outpicDetailTaskCode, '=')
      ]
    },
    isDoor() {
      return !['bc', 'stores'].includes(this.$route.query.type)
    },
    dType() {
      const { designRange, picType } = this.$route.query
      if (picType === 'SG' && designRange === 'DOOR') {
        return 'DOOR'
      } else if (picType === 'SG' && designRange === 'STORES') {
        return 'STORES'
      } else {
        return 'BC'
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      getBasicsInfo(this.$route.query.id).then(res => {
        this.detail = res.data
        const ds = this.$split(this.detail.designSpace)
        if (res.data.designRange === 'DOOR') {
          ds.push('Q009')
        }
        this.filterDesignSpace = ds

        let type
        if (res.data.designRange === 'DOOR') {
          type = 'door'
        }
        postDetailTaskAreaPage(this.$route.query.outpicDetailTaskCode, type).then(res => {
          this.tableData = res.data.records.map(e => {
            for (const [k, v] of Object.entries(e)) {
              if (v === 'null') {
                e[k] = ''
              }
            }
            return e
          })
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.detail{

}
</style>
